import React, { useEffect, useState, useRef } from 'react';
import { useTitle, useDebounceFn, useRequest } from 'ahooks';
import { Typography, Spin } from 'antd';
const { Title } = Typography;
import QuestionCard from '../../components/QuestionCard';
import ListSearch from '../../components/ListSearch';
import styles from './List.module.scss';
import { useSearchParams } from 'react-router-dom';
import { getQuestionList } from '../../services/question';
export default function List() {
    useTitle('小菌问卷-我的问卷');
    const buttomRef = useRef(null);
    const [list, setList] = useState([]);
    const [page, setPage] = useState(1);
    const [total, setTotal] = useState(0);
    const haveMoreData = total > list.length || total === 0;

    const [searchParams] = useSearchParams();
    const keyword = searchParams.get('keyword') || '';
    useEffect(() => {
        setTotal(0);
        setList([]);
        setPage(1);
    }, [keyword]);

    const { run: loadMore, loading } = useRequest(
        async () => {
            const data = await getQuestionList({
                page,
                keyword,
            });
            return data;
        },
        {
            manual: true, // 手动执行
            onSuccess: data => {
                setTotal(data.total);
                setList([...list, ...data.list]);
                setPage(page + 1);
            },
        }
    );
    const { run: tryLoadMore } = useDebounceFn(
        () => {
            // 判断底部元素是否显示出来
            if (!buttomRef.current) return;
            if (!buttomRef.current.getBoundingClientRect()) return;
            const { bottom } = buttomRef.current.getBoundingClientRect();
            if (bottom <= document.body.clientHeight) {
                loadMore();
            }
        },
        {
            wait: 200,
        }
    );

    useEffect(() => {
        tryLoadMore();
    }, [searchParams]);

    useEffect(() => {
        // 监听页面滚动
        if (haveMoreData) {
            window.addEventListener('scroll', tryLoadMore, true);
        }
        return () => {
            window.removeEventListener('scroll', tryLoadMore, true);
        };
    }, [searchParams]);
    return (
        <div className={styles.container}>
            <div className={styles.header}>
                <div className={styles.left}>
                    <Title level={3}>我的问卷</Title>
                </div>
                <div className={styles.right}>
                    <ListSearch />
                </div>
            </div>
            <div className={styles['list']}>
                {list.map(item => {
                    return <QuestionCard key={item._id} {...item} />;
                })}
                {loading && (
                    <div style={{ textAlign: 'center' }}>
                        <Spin tip="加载中..." />
                    </div>
                )}
            </div>
            {haveMoreData ? (
                <div className={styles.footer} ref={buttomRef}>
                    下滑加载更多
                </div>
            ) : (
                <div className={styles.footer}>没有数据了</div>
            )}
        </div>
    );
}
